body {
    background-color: lightblue;
    font-size: 20px;
}

// 用$定义变量
// 全局变量定义:单属性
$color:tomato;
// 复合属性 
$border:1px solid red;
#app {
    color: $color
}

// 嵌套选择器
#content {
    border: $border;
    article {
        .title {
            font-size: 20px;
            color: red;
            // &表示自身
            &:hover {
                color: yellow
            }
        }
    }
}

nav {
    // 定义局部变量
    $bgcolor: #fff;
    background-color: $bgcolor
}

.footer {
    background-color: gray;
    padding: 100px;
    text-align: center;
}